<template>
  <div>
    <el-form :model="countData" label-width="100px">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="周期类型" prop="period">
            <el-select
              v-model="countData.period"
              @change="cycleChange"
              placeholder="请选择周期类型"
            >
              <el-option
                v-for="item in periodList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4" v-if="countData.period == '1'">
          <el-checkbox
            v-model="weekChecked"
            @change="effectiveChange"
            style="padding-top: 5px"
            >本周生效</el-checkbox
          >
        </el-col>
        <el-col :span="4" v-if="countData.period == '2'">
          <el-checkbox
            v-model="monthChecked"
            @change="effectiveChange"
            style="padding-top: 5px"
            >当月生效</el-checkbox
          >
        </el-col>
        <div v-if="countData.period == '0'">
          <el-col :span="6">
            <el-form-item label="开始时间" prop="startTime">
              <el-date-picker
                v-model="countData.startTime"
                type="datetime"
                placeholder="开始时间"
                :disabled-date="pickerOptionsStart"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="结束时间" prop="endTime">
              <el-date-picker
                v-model="countData.endTime"
                type="datetime"
                placeholder="结束时间"
                :disabled-date="pickerOptionsEnd"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </div>
        <div v-else-if="countData.period == '1'">
          <el-col :span="6">
            <el-form-item label="开始时间" prop="startTime">
              <el-date-picker
                v-model="countData.startTime"
                type="week"
                placeholder="开始周"
                format="YYYY 第 ww 周"
                :disabled-date="weekOptionsStart"
                @change="pickerChange"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="结束时间" prop="endTime">
              <el-date-picker
                v-model="countData.endTime"
                type="week"
                placeholder="结束周"
                format="YYYY 第 ww 周"
                :disabled-date="weekOptionsEnd"
                @change="pickerChange"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </div>
        <el-col :span="6" v-else-if="countData.period == '2'">
          <el-form-item label="服务时间段" prop="time">
            <el-date-picker
              type="monthrange"
              v-model="countData.time"
              :disabled-date="monthOptionsStart"
              range-separator="至"
              start-placeholder="开始月份"
              end-placeholder="结束月份"
              @change="pickerChange"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup name="DataComponent">
import moment from "moment";
import { ElMessage } from 'element-plus'
import { ref, reactive, toRefs } from 'vue';

const weekChecked = ref(false);
const monthChecked = ref(false);
const periodList = ref([
  {
    value: "0",
    label: "每天",
  },
  {
    value: "1",
    label: "每周",
  },
  {
    value: "2",
    label: "每月",
  },
])
const data = reactive({
  countData: {
    period: '0',
    startTime: '',
    endTime: '',
    time: []
  },
});
const { countData } = toRefs(data);

const pickerOptionsStart = (time) => {
  if (countData.value.endTime) {
    return Boolean(
      time.getTime() <= Date.now() - 8.64e6 ||
      time.getTime() >=
        moment(
          countData.value.endTime
        ) /*开始日期要在选择的结束日期之前*/
    );
  }
  return Boolean(time.getTime() <= Date.now() - 8.64e7); /*今天及以后*/
};

const pickerOptionsEnd = (time) => {
  if (countData.value.startTime) {
    return Boolean(
      time.getTime() < Date.now() - 8.64e6 ||
      time.getTime() <
        moment(
          countData.value.startTime
        ) /*结束日期要在选择的开始日期之后*/
    );
  }
  return Boolean(time.getTime() <= Date.now() - 8.64e7); /*今天及以后*/
};

const weekOptionsStart = (time) => {
  if (countData.value.endTime) {
    return Boolean(
      time.getTime() <
        moment()
          .week(moment().week() - (weekChecked.value ? 1 : 0))
          .endOf('week') +
          8.64e7 ||
      time.getTime() >=
        moment(countData.value.endTime).endOf('week') +
          8.64e7 /*开始日期要在选择的结束日期之前*/
    );
  }
  return Boolean(
    time.getTime() <
    moment()
      .week(moment().week() - (weekChecked.value ? 1 : 0))
      .endOf('week') +
      8.64e7
  ); /*上周日以后*/
};

const weekOptionsEnd = (time) => {
  if (countData.value.startTime) {
    return Boolean(
      time.getTime() <=
        moment()
          .week(moment().week() - (weekChecked.value ? 1 : 0))
          .endOf('week') +
          8.64e7 ||
      time.getTime() <=
        moment(countData.value.startTime).startOf(
          'week',
        ) /*结束日期要在选择的开始日期之后*/
    );
  }
  return Boolean(
    time.getTime() <
    moment()
      .week(moment().week() - (weekChecked.value ? 1 : 0))
      .endOf('week') +
      8.64e7
  ); /*上周日以后*/
};

const monthOptionsStart = (time) => {
  return Boolean(
    time.getTime() <
    moment(
      moment()
        .month(moment().month() - (monthChecked.value ? 1 : 0))
        .endOf('month'),
    )
  ); /*上月以后*/
};

const cycleChange = (e) => {
  if (e == "1") {
    monthChecked.value = false;
  } else if (e == "2") {
    weekChecked.value = false;
  } else {
    monthChecked.value = false;
    weekChecked.value = false;
  }
}

const effectiveChange = (e) => {
  if (countData.value.period == '1') {
    countData.value.startTime = null;
    countData.value.endTime = null;
  } else {
    countData.value.time = [];
  }
  cycleChange(countData.value.period);
}

const pickerChange = () => {
  if (
    countData.value.period == "2" &&
    countData.value.time.length > 0
  ) { //（周期类型：每月）
    if (monthChecked.value) { // 本月生效
      if (moment(countData.value.time[0]).format('YYYY-MM')==moment().format('YYYY-MM')) {  // 当月生效 判断是否是从当月开始
        console.log(
          timeDiff(
            "months",
            countData.value.time[0],
            countData.value.time[1]
          )
        );
      } else {
        ElMessage({
          message: "请从本月开始选择",
          center: true,
          type: "error",
        });
        countData.value.time = [];
      }
    } else {
      console.log(
        timeDiff(
          "months",
          countData.value.time[0],
          countData.value.time[1]
        )
      );
    }
  } 
  if (countData.value.period == "1" && countData.value.startTime && weekChecked.value) { // （周期类型：每周） 选择开始时间
  console.log(countData.value.startTime,moment(countData.value.startTime).format("yyyy-WW"));
    if (moment(countData.value.startTime).format("yyyy-WW")!=moment().format("yyyy-WW")) { // 开始时间不为本周
      ElMessage({
        message: "请从本周开始选择",
        center: true,
        type: "error",
      });
      countData.value.startTime= '';
    }
  }
}

// 计算时间差
const timeDiff = (type, startTime, endTime) => {
  return moment(endTime).diff(moment(startTime), type) + 1;
}
</script>

<style lang="scss" scoped>
::v-deep {
  .el-input__inner {
    width: 150px;
  }
}
</style>
